<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p{
            background-color: #92022c;
            width: 200px;
            height: 200px;
            margin: 500px auto;
            /*transform: translate(100px ,200px);*/
            transform: rotate(90deg);
            /*transform: scale(10 ,1);*/
            /*transform: skew(220deg);*/
            transform-origin: 10% 20%;
        }

        .father{
            width: 200px;
            height: 200px;
            margin: 0 auto;

            border: 1px solid black;
            perspective: 150px;
        }

        .son{
            background-color: #92022c;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<!--<p></p>-->

<div class="father">
    <div class="son"></div>
</div>

<!--

1.变形(transform)
    translate(x,y)定义 2D 转换，沿着 X和Y 轴移动元素。
    translateX(n)定义 2D 转换，沿着 X 轴移动元素。
    translateY(n)定义 2D 转换，沿着 Y 轴移动元素
    scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。
    scaleX(n)定义 2D 缩放转换，改变元素的宽度。
    scaleY(n)定义 2D 缩放转换，改变元素的高度。
    rotate(angle)定义 2D 旋转，在参数中规定角度。
    skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X和Y轴。
    skewX(angle)定义 2D 倾斜转换，沿着 X轴。
    skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。
    matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。

2.transform-origin:调整元素旋转的基点。
    transform-origin:x-axis y-axis axis;属性值:
        x-axis :定义视图被置于 X轴的何处。可能的值:left，center，right，length，%。
        y-axis :定义视图被置于 丫轴的何处。可能的值:top，center，bottom，length，%。
        z-axis :定义视图被置于 2 轴的何处。可能的值:length。

3.perspective
    让子元素获得透视效果。
    perspective:length | none
    主流浏览器都不支持，谷歌要加-webkit-，或在长度后加单位

-->

</body>
</html>